$(function () {
  const inputObj = $("<input type='text' />");
  $("table").on("click", "td", function () {
    // $("td").click(function (event) {
    // console.log(this.className)
    if (this.className == "edith") {
      //td中已经有了input,则不需要响应点击事件
      if ($(this).children("input").length > 0) return false;
      var tdObj = $(this); //得到当前文本内容
      var preText = tdObj.html(); //创建一个文本框元素
      tdObj.html(""); //清空td中的所有元素
      inputObj
        .width(tdObj.width() / 1)
        //设置文本框宽度与td相同
        .height(tdObj.height())
        .css({ border: "1px", fontSize: "17px", font: "宋体" })
        .val(preText)
        .appendTo(tdObj)
        //把创建的文本框插入到tdObj子节点的最后
        .trigger("focus")
        //用trigger方法触发事件
        .trigger("select");
      inputObj.keyup(function (event) {
        //键盘检测
        if (13 == event.which) {
          //用户按下回车键盘
          var text = $(this).val();
          tdObj.html(text);
        } else if (27 == event.which) {
          //ESC键
          tdObj.html(preText);
        }
      });
      //已进入编辑状态后，不再处理click事件
      inputObj.click(function () {
        return false;
      });
    }
  });

  $("td").mouseleave(function () {
    if (this.className == "edith") {
      // console.log("classname：", this.className)
      $(this).css("background-color", "#E9E9E4");
      //td中已经有了input,则不需要响应点击事件
      if ($(this).children("input").length > 0) return false;
      var tdObj = $(this); //得到当前文本内容
      var preText = tdObj.html(); //创建一个文本框元素
      tdObj.html(""); //清空td中的所有元素
      inputObj
        .width(tdObj.width() / 1)
        //设置文本框宽度与td相同
        .height(tdObj.height())
        .css({ border: "1px", fontSize: "17px", font: "宋体" })
        .val(preText)
        // .appendTo(tdObj)
        //把创建的文本框插入到tdObj子节点的最后
        .trigger("focus")
        //用trigger方法触发事件
        .trigger("select");
      var text = $(this).val();
      tdObj.html(text);
      inputObj.keyup(function (event) {
        if (27 == event.which) {
          //ESC键
          tdObj.html(preText);
        }
      });

      //已进入编辑状态后，不再处理click事件
      inputObj.click(function () {
        return false;
      });
    }
  });
});
